<template>
  <div ref='container' style="width:600px;height:300px;backgroundColor: brown;">
  </div>
</template>
<script setup name="RealTimeChart">
import { lightningChart, AxisScrollStrategies } from "@arction/lcjs";
import { ref, nextTick, onBeforeMount } from 'vue'
// 新建lightningChart图表
let chart = null
let series = null
let data = null
let InitDataArr=[]
let container = ref()

// 创建图表
function createChart() {
  chart = lightningChart().ChartXY({
    container: container.value,
    animate: false, 
  })
  // 配置x轴
  // .setAnimationScroll(false)/.setAnimationsEnabled(false) 禁用动画
  chart.getDefaultAxisX().setScrollStrategy(AxisScrollStrategies.progressive).setInterval({ start: 0, end: 19, stopAxisAfter: false })//stopAxisAfter:让x轴移动
  chart.getDefaultAxisY().setAnimationScroll(false)//禁用y轴动画，防止初始化时候折线划入的诡异动画
  // 新建直线系列，其中包括默认的X和Y坐标轴
  series = chart.addLineSeries()
}

// 更新数据
function updateData() {
  let randomNum = Math.random();
  data = {
    x: data.x + 1,
    y: 50 + randomNum * 20,
  };
  series.add(data);
}

onBeforeMount(() => {
  nextTick(() => {
    createChart()
    for (let i = 0; i < 20; i++) {
      let randomNum = Math.random();
      data = {
        x: i,
        y: 50 + randomNum * 20,
      };
      InitDataArr.push(data)
    }
    series.add(InitDataArr);
    setInterval(updateData, 1000);
  })
})




</script>